<template>
    <div id="temprature"/>
</template>

<script setup>
import * as echarts from 'echarts'
import {onMounted,reactive} from 'vue';
const setWidthHeight = reactive({
    width: '400px',
    height: '350px'
})

onMounted(()=> {
    console.log('Temprature - mounted');
    draw(setWidthHeight);
})
function draw(setWidthHeight){
    var chartDom = document.getElementById('temprature');
    var myChart = echarts.init(chartDom,null,setWidthHeight);
    var option;

    option = {
        series: [
            {
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 60,
                splitNumber: 12,
                itemStyle: {
                    color: '#FFAB91'
                },
                progress: {                 //进度条圆环
                    show: true,
                    width: 10               //宽度
                },
                pointer: {
                    show: false
                },
                axisLine: {                 //进度条背景圆环的大小
                    lineStyle: {
                        width: 20
                    }
                },
                axisTick: {                 //小刻度
                    distance: -35,          //跟图表之间的距离
                    splitNumber: 5,         //个数
                    lineStyle: {
                    width: 2,               //小刻度宽度
                        color: '#999'
                    }
                },
                splitLine: {                //大刻度
                    distance: -45,          //大刻度跟图标之间的距离
                    length: 18,             //大刻度长度
                    lineStyle: {
                        width: 3,
                        color: '#999'
                    }
                },
                axisLabel: {                //标度字号
                    distance: -20,          //标度跟刻度之间的距离
                    color: '#999',
                    fontSize: 15
                },
                anchor: {
                    show: false
                },
                title: {
                    show: true
                },
                detail: {                           //细节参数
                    valueAnimation: true,
                    width: '60%',
                    lineHeight: 40,
                    borderRadius: 8,                //外边距曲率
                    offsetCenter: [0, '-15%'],
                    fontSize: 40,                   //数字字号
                    fontWeight: 'bolder',           //字体宽度
                    formatter: '{value} °C',        //数字内容
                    color: 'inherit'                //颜色
                },
                data: [
                    {
                        value: 20
                    }
                ]
            },
            {
                type: 'gauge',
                center: ['50%', '60%'],
                startAngle: 200,
                endAngle: -20,
                min: 0,
                max: 60,
                itemStyle: {
                    color: '#FD7347'
                },
                progress: {
                    show: true,
                    width: 8
                },
                pointer: {
                    show: false
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                },
                splitLine: {
                    show: false
                },
                axisLabel: {
                    show: false
                },
                detail: {
                    show: false
                },
                data: [
                    {
                        value: 20
                    }
                ]
            }
        ]
    };
    setInterval(function () {
        const random = +(Math.random() * 60).toFixed(2);
        myChart.setOption({
            series: [
                {
                    data: [
                        {
                            value: random
                        }
                    ]
                },
                {
                    data: [
                        {
                            value: random
                        }
                    ]
                }
            ]
        });
    }, 2000);

    option && myChart.setOption(option);
}
</script>

<style scoped>

</style>